<template>
  <div class="data">
    <!-- <Header :collapse="1" :fullscreen="false" :activeName="'first'" :fullscreenName="fullscreenName"
      @handlefullScreen="handlefullScreen" v-if="isFullShow"></Header> -->
    <div id="sceneBox" @contextmenu.prevent="handleContextmenu()"></div>
    <div class="data-content">
      <!-- <data-Board :isgarden="1" @handleParkOverview="handleParkOverview"
        style="position: fixed; top: 90px; padding-left: 15px; height: 92%"></data-Board>
      <data-BoardRight :isgarden="1" v-if="!isProduct" @handleParkOverview="handleParkOverview"
        style="position: fixed; top: 90px; padding-right: 15px"></data-BoardRight> -->
      <!-- <div class="con-center fl"> -->

      <!-- </div> -->

      <div class="productList" v-if="isProduct">
        <!-- <a @click="showPro">所有生产线</a>
        <a @click="showScene">场景控制</a> -->
        <div @click="handleBack">返回园区</div>
      </div>
      <div class="productList1" @click="handleEnter">进入园区</div>
      <menu-Pop v-if="echartsDrawerShow" :drawerText="drawerText" :echartsDrawerShow="echartsDrawerShow"
        @handleClose="handleClose" :isProduct="isProduct"></menu-Pop>
      <manufacturing-Shop v-if="manufacturing" :manufacturing="manufacturing" @handleClose="handleClose"
        @handleBuild="handleBuild"></manufacturing-Shop>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import Header from "../../components/Header.vue";
import { ElLoading } from "element-plus";
import menuPop from "../module/menu_pop.vue";
import manufacturingShop from "../module/manufacturingShop.vue";
import dataBoard from "../module/data_Board.vue";
import dataBoardRight from "../module/data_BoardRight.vue";
import { ref, reactive, nextTick } from "vue";
export default {
  components: { Header, menuPop, dataBoard, dataBoardRight, manufacturingShop },
  data() {
    return {
      isProduct: false,
      industryData: [
        {
          code: "103",
          snbyyd: 14730.458,
          totalDevice: 11,
          outputValue: 3000,
          totalEnergy: 111931.507,
          totalOveruse: 2,
          syyd: 14730.458,
          totalRoom: 11,
          bytb: 24,
          byyd: 11213.71,
          bytbFlag: "2",
          plineNum: 10,
          companyNum: 10,
          floors: 20,
          name: "生产车间",
        },
        {
          code: "106",
          snbyyd: 353.086,
          totalDevice: 3,
          outputValue: 3000,
          totalEnergy: 1508.923,
          totalOveruse: 2,
          syyd: 353.086,
          totalRoom: 3,
          bytb: 23,
          byyd: 270.211,
          bytbFlag: "2",
          plineNum: 10,
          companyNum: 10,
          floors: 20,
          name: "汽车充电桩",
        },
        {
          code: "102",
          snbyyd: 193.198,
          totalDevice: 1,
          outputValue: 3000,
          totalEnergy: 1740.336,
          totalOveruse: 2,
          syyd: 193.198,
          totalRoom: 1,
          bytb: 51,
          byyd: 94.105,
          bytbFlag: "2",
          plineNum: 0,
          companyNum: 10,
          floors: 20,
          name: "办公楼",
        },
        {
          code: "104",
          snbyyd: 54.419,
          totalDevice: 1,
          outputValue: 3000,
          totalEnergy: 214.331,
          totalOveruse: 2,
          syyd: 54.419,
          totalRoom: 1,
          bytb: 10,
          byyd: 49.025,
          bytbFlag: "2",
          plineNum: 10,
          companyNum: 10,
          floors: 20,
          name: "路灯",
        },
        {
          code: "101",
          snbyyd: 0,
          totalDevice: 0,
          outputValue: 3000,
          totalEnergy: 0,
          totalOveruse: 2,
          syyd: 0,
          totalRoom: 0,
          bytb: 0,
          byyd: 0,
          bytbFlag: "1",
          plineNum: 0,
          companyNum: 10,
          floors: 20,
          name: "宿舍楼",
        },
        {
          code: "105",
          snbyyd: 0,
          totalDevice: 0,
          outputValue: 3000,
          totalEnergy: 0,
          totalOveruse: 2,
          syyd: 0,
          totalRoom: 0,
          bytb: 0,
          byyd: 0,
          bytbFlag: "1",
          plineNum: 10,
          companyNum: 10,
          floors: 20,
          name: "自行车充电桩",
        },
      ],
      productList: [
        {
          id: "290e4d0fcc0859aadf91d9e8b2100875",
          no: "shengchanxian1",
          name: "ACC-A线",
          type: null,
          limitUse: null,
          thisEnergy: 2819.586,
          totalEnergy: 25530.107,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian1",
        },
        {
          id: "249047395d3a948630aa894b4638abed",
          no: "shengchanxian2",
          name: "ACC-B线",
          type: null,
          limitUse: null,
          thisEnergy: 1020.883,
          totalEnergy: 5677.342,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian2",
        },
        {
          id: "321e0f4572cdc23bae12f4f428b338ae",
          no: "shengchanxian6",
          name: "ACC-D&ACC-I",
          type: null,
          limitUse: null,
          thisEnergy: 696.201,
          totalEnergy: 17331.782,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian6",
        },
        {
          id: "1ce17b066399c2802b3f00d8358bb822",
          no: "shengchanxian3",
          name: "CO三极自动线",
          type: null,
          limitUse: null,
          thisEnergy: 444.531,
          totalEnergy: 9494.577,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian3",
        },
        {
          id: "24c7ec07aceb4bca3562c01be611b31c",
          no: "shengchanxian7",
          name: "ACC-K&C2手工线",
          type: null,
          limitUse: null,
          thisEnergy: 269.887,
          totalEnergy: 4295.164,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian7",
        },
        {
          id: "6563f9abbdceef912c1029516217a449",
          no: "shengchanxian4",
          name: "UEC125/38线&ACC-E",
          type: null,
          limitUse: null,
          thisEnergy: 205.953,
          totalEnergy: 3191.579,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian4",
        },
        {
          id: "a63e887f467fef56afc0dbe4bfa81a42",
          no: "shengchanxian5",
          name: "ACC-F&ACC-H",
          type: null,
          limitUse: null,
          thisEnergy: 10.584,
          totalEnergy: 473.268,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336be",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian5",
        },
        {
          id: "a63e887f467fef56afc0dbe4bfa81a43",
          no: "shengchanxian6",
          name: "ACC-F&ACC-H1",
          type: null,
          limitUse: null,
          thisEnergy: 10.584,
          totalEnergy: 473.268,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336bb",
          companyName: "东林厂区二期厂房三楼",
          monthOutputJson: null,
          outNo: "shengchanxian6",
        },
        {
          id: "a63e887f467fef56afc0dbe4bfa81a44",
          no: "shengchanxian7",
          name: "ACC-F&ACC-H2",
          type: null,
          limitUse: null,
          thisEnergy: 10.584,
          totalEnergy: 473.268,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336ba",
          companyName: "东林厂区二期厂房二楼",
          monthOutputJson: null,
          outNo: "shengchanxian7",
        },
        {
          id: "a63e887f467fef56afc0dbe4bfa81a45",
          no: "shengchanxian8",
          name: "ABB-F&ACC-H3",
          type: null,
          limitUse: null,
          thisEnergy: 10.584,
          totalEnergy: 473.268,
          status: "1",
          runStatus: "1",
          monthOutput: 0,
          monthOutputEnergy: 0,
          companyId: "eca18d94dfe4b4dbd87cf3a3990336ba",
          companyName: "东林厂区二期厂房三楼",
          monthOutputJson: null,
          outNo: "shengchanxian8",
        },
      ],
      publicPath: "./public/",
      echartsDrawerShow: false,
      manufacturing: false,
      drawerText: "",
    };
  },
  mounted() {
    this.initApp();
  },
  beforeCreate() {
    window.showDialog = (building, id) => {
      console.log(building);
      // eslint-disable-next-line eqeqeq
      //   window.parent.postMessage({ action: building, row: this.productList[0] }, '*');
    //   if (building == "shengchanxian") {
        // eslint-disable-next-line eqeqeq
        const index = this.productList.findIndex((v) => v.id == id);
        // console.log(index);
        // console.log(this.productList[index]);
        this.drawerText = this.productList[index].name;
    //     this.echartsDrawerShow = true;
    //     // window.parent.postMessage(
    //     //   { action: building, row: this.productList[index] },
    //     //   "*"
    //     // );
    //   } else if (building == "bangonglou") {
    //     this.echartsDrawerShow = true;
    //     this.drawerText = "办公楼";
    //   } else if (building == "ludeng") {
    //     this.echartsDrawerShow = true;
    //     this.drawerText = "路灯";
    //   } else if (building == "chongdianzhuang") {
    //     this.echartsDrawerShow = true;
    //     this.drawerText = "汽车充电桩";
    //   } else {
    //     // eslint-disable-next-line no-unused-expressions
    //     building && window.parent.postMessage({ action: building }, "*");
    //   }
       window.parent.postMessage(
          { action: building, row: this.productList[index] },
          "*"
        );
    };
    window.showSub = (building) => {
      console.log(building);
      // document.getElementById(building).style.zIndex = '1099';
      // if (building === "bangonglou") {
      //   document.getElementById("subBangong").style.display = "block";
      // } else if (building === "sushe") {
      //   document.getElementById("subSushe").style.display = "block";
      // } else if (building === "shengchanlou") {
      //   document.getElementById("subShenchan").style.display = "block";
      // } else if (building === "chongdianzhuang") {
      //   document.getElementById("subChongdianzhuang").style.display = "block";
      // } else if (building === "chepeng") {
      //   document.getElementById("subChepeng").style.display = "block";
      // } else if (building === "ludeng") {
      //   document.getElementById("subLudeng").style.display = "block";
      // } else {
      document.getElementById(building).style.display = "block";
      // }
    };
    window.hideSub = (building) => {
      console.log(building);
      document.getElementById(building).style.zIndex = "1000";
      if (building === "bangonglou") {
        document.getElementById("subBangong").style.display = "none";
      } else if (building === "sushe") {
        document.getElementById("subSushe").style.display = "none";
      } else if (building === "shengchanlou") {
        // document.getElementById("subShenchan").style.display = "none";
      } else if (building === "chongdianzhuang") {
        document.getElementById("subChongdianzhuang").style.display = "none";
      } else if (building === "chepeng") {
        document.getElementById("subChepeng").style.display = "none";
      } else if (building === "ludeng") {
        document.getElementById("subLudeng").style.display = "none";
      } else {
        document.getElementById(building).style.display = "none";
      }
    };
    window.markerTap = (text) => {
      console.log(text);
      this.drawerText = text;
      // eslint-disable-next-line eqeqeq
      if (text == "光伏板") {
        window.open("http://iknowpower.com");
        // eslint-disable-next-line eqeqeq
      } else if (text == "办公楼" || text == "路灯" || text == "充电桩") {
        // window.parent.postMessage({ action: text }, "*");
        // eslint-disable-next-line eqeqeq
        this.echartsDrawerShow = true;
      } else if (text == "配电房" || text == "光伏板") {
        window.open("http://iknowpower.com");
      } else if (text == "生产车间") {
        this.manufacturing = true;
        // document.getElementById("subShenchan").style.display = "block";
      }
    };
  },
  created() {
    window.addEventListener("message", (e) => {
      console.log(e);
      // console.log(this.$app.buildings[0])
      // eslint-disable-next-line eqeqeq
      if (e.data.action == "industryData") {
        this.industryData = e.data.industryData;
        console.log("---", this.industryData);
        this.initMarker();
        // eslint-disable-next-line eqeqeq
      } else if (e.data.action == "productList") {
        console.log(e.data, "000");
        this.productList = e.data.productList;
        this.removePro();
        this.initProMarker();
      } else if (e.data.action === "toFloor") {
        this.$app.level.change(this.$app.buildings[0]);
      } else if (e.data.action === "afterEnterOutdoorsLevel") {
        this.$app.level.change(this.$app.query(".Campus")[0]);
      }
      this.initMarker();
    });
  },
  beforeUnmount() {

  },
  methods: {
    removePro() {
      // eslint-disable-next-line no-undef
      $(".chanxian").remove();
    },
    initProMarker() {
      // 生产线
      this.productList.forEach((item) => {
        console.log(item);
        const shengchanxian1 = this.$app.query(`#${item.outNo}`)[0];
        this.$app.create({
          type: "UIAnchor",
          parent: shengchanxian1,
          element: this.creareChanxian(item.name, item), // 此参数填写要添加的Dom元素
          localPosition: [0, 0, 0],
          pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        });
      });
      // const shengchanxian1 = this.$app.query('#shengchanxian1')[0];
      // this.$app.create({
      //     type: 'UIAnchor',
      //     parent: shengchanxian1,
      //     element: this.creareChanxian('生产线1',this.productList[0]), // 此参数填写要添加的Dom元素
      //     localPosition: [0, 0, 0],
      //     pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      // });
    },
    initMarker() {
      // 立库
      // const liku = this.$app.query("#liku")[0];
      // this.$app.create({
      //   type: "UIAnchor",
      //   parent: liku,
      //   element: this.createMarker("立库"), // 此参数填写要添加的Dom元素
      //   localPosition: [0, -10, 0],
      //   pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      //   zIndex: 100,
      // });
      // 配电房
      const peidianfang = this.$app.query("#peidianfang")[0];
      this.$app.create({
        type: "UIAnchor",
        parent: peidianfang,
        element: this.createMarker("配电房"), // 此参数填写要添加的Dom元素
        localPosition: [0, 1, 0],
        pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        zIndex: 100,
      });
      // 办公楼
      const bangonglou = this.$app.query("#bangonglou")[0];
      console.log(bangonglou);
      const bangonglouUI = this.$app.create({
        type: "UIAnchor",
        parent: bangonglou,
        element: this.createBangong("办公楼", bangonglou), // 此参数填写要添加的Dom元素
        localPosition: [0, 1, 0],
        pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      });
      bangonglouUI.zIndex = 100;
      // 生产楼
      const shengchanlou = this.$app.query("#shengchanlou")[0];
      const shengchanlouUI = this.$app.create({
        type: "UIAnchor",
        parent: shengchanlou,
        element: this.createShenchan("生产车间", shengchanlou), // 此参数填写要添加的Dom元素
        localPosition: [0, 1, 0],
        pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      });
      shengchanlouUI.zIndex = 100;
      // 路灯
      const ludeng = this.$app.query("#ludeng")[0];
      this.$app.create({
        type: "UIAnchor",
        parent: ludeng,
        element: this.createLudeng("路灯", ludeng), // 此参数填写要添加的Dom元素
        localPosition: [0, 1, 0],
        pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        zIndex: 100,
      });
      // 光伏板
      const guangfu = this.$app.query("#guangfu01")[0];
      if (!this.isProduct) {
        this.$app.create({
          type: "UIAnchor",
          parent: guangfu,
          element: this.createMarker("光伏板"), // 此参数填写要添加的Dom元素
          localPosition: [0, 1, 0],
          pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
          zIndex: 1000,
        });
      }
      // 自行车充电桩
      // const chepeng = this.$app.query("#chepeng")[0];
      // const chepengUi = this.$app.create({
      //   type: "UIAnchor",
      //   parent: chepeng,
      //   element: this.createChepeng("自行车充电桩", chepeng), // 此参数填写要添加的Dom元素
      //   localPosition: [0, 1, 0],
      //   pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      // });
      // chepengUi.zIndex = 100;
      // 充电桩
      const chongdianzhuang = this.$app.query("#chongdianzhuang")[0];
      const chongdianzhuangUi = this.$app.create({
        type: "UIAnchor",
        parent: chongdianzhuang,
        element: this.createChongdianzhuang("汽车充电桩", chongdianzhuang), // 此参数填写要添加的Dom元素
        localPosition: [0, 1, 0],
        pivot: [0.5, 1], // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      });
      chongdianzhuangUi.zIndex = 100;
      // 宿舍楼
      // const sushe = this.$app.query("#sushe")[0];
      // const susheUi = this.$app.create({
      //   type: "UIAnchor",
      //   parent: sushe,
      //   element: this.createSushe("宿舍", sushe), // 此参数填写要添加的Dom元素
      //   localPosition: [0, 1, 0],
      //   pivot: [0.5, 1],
      //   zIndex: 999, // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      // });
      // susheUi.zIndex = 100;
    },
    initApp() {
      this.$app = new THING.App({
        container: "sceneBox",
     url: './public/thing/scene/',
      loaderResourceUrl: './public/thing/model',
      });
      // this.$app.off('dblclick');
      // 加载样式模板插件
      const control = new THING.EffectThemeControl();
      this.$app.addControl(control, "效果模板控制器");

      // 获取样式模板插件
      this.$app.getControl("效果模板控制器");

      // 注册离线模板
      control.registerTheme(
        "default_parkbusiness",
        window.data.data,
        "./public/thing/theme/"
      );
      this.$app.level.options.autoChangeBackground = false;
      this.$app.on("load", (ev) => {
        console.log(ev);
        window.parent.postMessage({ action: "ready" }, "*");
        this.$app.level.change(ev.campus);
        const campus = this.$app.query(".Campus")[0];
        this.$app.camera.xAngleLimitRange = [0, 90];
        // 注册 进入建筑 事件
        this.$app.on("afterEnterBuildingLevel", () => {
          this.isProduct = true;
          // window.parent.postMessage(
          //   {
          //     action: "afterEnterBuildingLevel",
          //     productList: this.productList,
          //   },
          //   "*"
          // );
          this.removePro();
          this.initProMarker();
        });
        // 注册 进入室外 事件
        // this.$app.on('afterEnterOutdoorsLevel', () => {
        this.isProduct = false;
        window.parent.postMessage(
          {
            action: "afterEnterOutdoorsLevel",
          },
          "*"
        );
        // });
        // 应用效果模板
        // setTimeout(() => {
        //      campus.applyTheme('default_parkbusiness');
        // },100)
        campus.applyTheme("default_parkbusiness"); // 更改模型默认材质
        control.applyEffectTheme("default_parkbusiness", campus); // 生成特效地面，粒子等
        control.applyThemeEnvironment("default_parkbusiness", campus); // 应用背景，灯光，后期等全局
        // eslint-disable-next-line prefer-destructuring

        // 以路灯为例，获取对应的物体并飞过去
        // eslint-disable-next-line no-undef
        const obj = this.$app.query("#ludeng")[0];
        // 同时创建顶牌;
        // eslint-disable-next-line no-undef
        this.$app.create({
          type: "Marker",
          name: "marker02",
          url: "./public/src/assets/img/pointer.png",
          parent: obj,
          offset: [0, -5, 0],
        });
        // 设置勾边颜色
        obj.style.outlineColor = "#0000ff";
        // eslint-disable-next-line prefer-destructuring
        const buildings = campus.buildings;
        buildings.forEach((item) => {
          console.log(item);
          // 创建标注
          // let ui = this.$app.create({
          //     type: 'UIAnchor',
          //     parent: item,
          //     element: this.createElement(item), // 此参数填写要添加的Dom元素
          //     localPosition: [0, 1, 0],
          //     pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
          // });
        });
        // let objs = this.$app.query(/guangfu/);
        // console.log(objs)
        // objs.on('click',() => {
        //     console.log(1)
        //     window.open('http://iknowpower.com')
        // })

        // let panel = new THING.widget.Panel({
        //     // 设置面板宽度
        //     width: '150px',
        //     // cornerType 角标样式
        //     // 没有角标 none ，没有线的角标 noline ，折线角标 polyline
        //     cornerType: 'polyline'

        // })

        // // 绑定物体身上相应的属性数据
        // panel.addString(liku, 'name').caption('名称');

        //     // 创建UIAnchor面板
        // let uiAnchor = this.$app.create({
        //     // 类型
        //     type: 'UIAnchor',
        //     // 父节点设置
        //     parent: liku,
        //     // 要绑定的页面的 element 对象
        //     element: panel.domElement,
        //     // 设置 localPosition 为 [0, 0, 0]
        //     localPosition: [0, 0, 0],
        //     // 相对于Element左上角的偏移像素值
        //     pivotPixel: [-16, 109] // 当前用值是角标的中心点
        // });

        setTimeout(() => {
          // alert('将直接定位到路灯');
          // 在下面写业务代码，已有id的设备列表的对应关系
          // 汽车充电桩：chongdianzhuang
          // 自行车充电桩：chepeng
          // 光伏：guangfu
          // 路灯：ludeng
          // 配电房：peidianfang
          // 立库：liku
          // 宿舍：sushe
          // 以路灯为例，获取对应的物体并飞过去
          // const obj = this.$app.query('#ludeng')[0];
          // this.$app.camera.flyTo({
          //     object: obj,
          //     time: 1000,
          // });
          // 同时创建顶牌
          // this.$app.create({
          //     type: 'Marker',
          //     name: 'marker02',
          //     url: '${this.publicPath}img/pointer.png',
          //     parent: obj,
          //     offset: [0, -5, 0],
          // });
          // 设置勾边颜色
          // obj.style.outlineColor = '#0000ff';
        }, 1000);
      });
    },
    createMarker(text) {
      const html = `<div class="sign" onclick="markerTap('${text}')" ontouchstart="markerTap('${text}')" id="board" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 1000;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath}img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img   class="cicle5" style="width:100px" src="${this.publicPath}img/point.svg" />
                    </div>
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    creareChanxian(text, item) {
      let subhtml = "";
      if (item) {
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:10000;display:none;" id="${text}" >
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${item.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">月万元产值耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${item.monthOutputEnergy || "0"
          }kwh</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">本月用电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${item.thisEnergy || "0"
          }kwh</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">状态</div>
                                <div  style="color:${item.runStatus === 1 ? "#27FFB7" : "#FF4B6C"
          };font-size:18px;">${item.runStatus === 1 ? "运转中" : "停止"
          }</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="chanxian" onclick="showDialog('shengchanxian','${item.id
        }')" ontouchstart="showDialog('shengchanxian','${item.id
        }')"  onmouseenter="showSub('${text}')" onmouseleave="hideSub('${text}')" id="sushe" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img  class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createLudeng(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "ludeng") {
          this.industryData.forEach((v) => {
            if (v.code === "104") {
              curData = v;
            }
          });
        }
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:12000;display:none;" id="subLudeng">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">节点总数</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">总耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalEnergy || "0"
          }kwh</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="showDialog('${item ? item.id : ""
        }')" ontouchstart="showDialog('${item ? item.id : ""
        }')" onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="ludeng" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img  class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createChepeng(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "chepeng") {
          this.industryData.forEach((v) => {
            if (v.code === "105") {
              curData = v;
            }
          });
        }
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:10000;display:none;" id="subChepeng">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">充电桩数量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">总耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalEnergy || "0"
          }kwh</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="showDialog('${item ? item.id : ""
        }')" ontouchstart="showDialog('${item ? item.id : ""
        }')"  onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="chepeng" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img   class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createChongdianzhuang(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "chongdianzhuang") {
          this.industryData.forEach((v) => {
            if (v.code === "106") {
              curData = v;
            }
          });
        }
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:10000;display:none;" id="subChongdianzhuang">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">充电桩数量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">总耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalEnergy || "0"
          }kwh</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="showDialog('${item ? item.id : ""
        }')"  ontouchstart="showDialog('${item ? item.id : ""
        }')" onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="chongdianzhuang" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img  class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createShenchan(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "shengchanlou") {
          this.industryData.forEach((v) => {
            if (v.code === "103") {
              curData = v;
            }
          });
        }
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:10000;display:none;" id="subShenchan">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;" onclick="markerTap('${text}')" ontouchstart="markerTap('${text}')"  onmouseenter="showSub('${item ? item.id : ""
          }')" onmouseleave="hideSub('${item ? item.id : ""}')">生产线数量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">总耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalEnergy || "0"
          }kwh</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="markerTap('${text}')" ontouchstart="markerTap('${text}')"  onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="shengchanlou" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img  class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createSushe(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "sushe") {
          this.industryData.forEach((v) => {
            if (v.code === "101") {
              curData = v;
            }
          });
        }
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:300px;z-index:10000;display:none;" id="subSushe">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">总耗电量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalEnergy || "0"
          }kwh</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">本月超用电房间数</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalOveruse || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">房间总数</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalRoom || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">节点总数</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="showDialog('${item ? item.id : ""
        }')" ontouchstart="showDialog('${item ? item.id : ""
        }')"  onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="sushe" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img  class="cicle5" style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createBangong(text, item) {
      let subhtml = "";
      if (item) {
        let curData = {};
        if (item.id === "bangonglou") {
          this.industryData.forEach((v) => {
            if (v.code === "102") {
              curData = v;
            }
          });
        }
        // background: rgba(17, 42, 78, 0.9);
        subhtml = `
                    <div style="position:absolute;top:0;left:150px;width:246px;z-index:99999;display:none;" id="subBangong">
                        <div style="position:absolute;top:-13px;left:0;right:0;">
                            <img src="${this.publicPath
          }img/header.png" style="width:50%;" />
                        </div>
                        <div style="background:url('${this.publicPath
          }img/over.png') center center no-repeat;background-size:100% 100%;padding:10px 20px;background-color: rgba(17, 42, 78, 0.9);backdrop-filter: blur(16px);">
                            <div style="font-size: 18px;font-weight: bold;margin-bottom:20px;">
                                <img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle;" /> <span style="margin:0 20px;">${curData.name || ""
          }</span><img src="${this.publicPath
          }img/arrow.svg" style="vertical-align:middle; transform:rotate(180deg)" />
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">单位数量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.companyNum || "0"
          }个</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">楼层数量</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.floors || "0"
          }层</div>
                            </div>
                            <div style="display:flex;justify-content:space-between;background: linear-gradient(270deg, rgba(27, 184, 255, 0.2) 3.21%, rgba(27, 184, 255, 0.01) 100%);margin-top:5px;padding:6px 10px;">
                                <div style="color:#27CBFF;font-size:18px;">节点</div>
                                <div  style="color:#FFFFFF;font-size:18px;">${curData.totalDevice || "0"
          }个</div>
                            </div>
                        </div>
                    </div>
                `;
      }
      const html = `<div class="sign" onclick="showDialog('${item ? item.id : ""
        }')" ontouchstart="showDialog('${item ? item.id : ""
        }')" onmouseenter="showSub('${item ? item.id : ""
        }')" onmouseleave="hideSub('${item ? item.id : ""
        }')" id="bangonglou" style="font-size: 12px;width: 150px;text-align: center;color: #eee;position: absolute;top: 0;left: 0;z-index: 111;display: none;">
                    <div class="s1" style="line-height: 45px;overflow: hidden;text-align:center;background:url('${this.publicPath
        }img/name_bg.svg');background-size:100% 100%;">
                        <span class="span-l font" >${text || ""}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 0px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:center;">
                        <img class="cicle5"  style="width:100px" src="${this.publicPath
        }img/point.svg" />
                    </div>
                    ${subhtml}
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      newElem.style.animation = "circle5 4s linear infinite";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    createElement(item) {
      console.log(item.id, "123", this.industryData);
      let curData = {};
      if (item.id === "sushe") {
        // eslint-disable-next-line prefer-destructuring
        curData = this.industryData[0];
      } else if (item.id === "liku") {
        // eslint-disable-next-line prefer-destructuring
        curData = this.industryData[1];
      } else if (item.id === "peidianfang") {
        // eslint-disable-next-line prefer-destructuring
        curData = this.industryData[2];
      }
      const html = `<div class="sign" onclick="showDialog('${item.id}')" ontouchstart="showDialog('${item.id}')" id="board" style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
                    <div class="s1" style="line-height: 32px;overflow: hidden;text-align:left;">
                        <span class="span-l font" style="margin: 0px 0px 0px 10px;">${curData.name}</span>
                    </div>
                    <div class="s2" style="margin: 0px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;text-align:left;">
                        <div class="div-l font1" style="margin: 0px 10px 0px 10px;">数值</div>
                        <div class="div-l font1" style="margin: 0px 10px 0px 10px;">数值</div>
                        <div class="div-l font1" style="margin: 0px 10px 0px 10px;">数值</div>
                        <div class="div-l font1" style="margin: 0px 10px 0px 10px;">数值</div>
                        <div class="div-l font1" style="margin: 0px 10px 0px 10px;">数值</div>
                    </div>
                </div>`;
      // eslint-disable-next-line no-undef
      const srcElem = $(html)[0];
      const newElem = srcElem.cloneNode(true);
      newElem.style.display = "block";
      this.$app.domElement.append(newElem, srcElem);
      return newElem;
    },
    showPro() {
      window.parent.postMessage(
        {
          action: "productList",
        },
        "*"
      );
    },
    showScene() {
      window.parent.postMessage(
        {
          action: "sceneList",
        },
        "*"
      );
    },
    handleBack() {
      this.$app.level.change(this.$app.query(".Campus")[0]);
      this.isProduct = false;
      // this.$app.camera.xAngleLimitRange = [0, 90];
      // const campus = this.$app.query(".Campus")[0];
      // this.$app.on("afterEnterOutdoorsLevel", () => {
      //   this.isProduct = false;
      //   window.parent.postMessage(
      //     {
      //       action: "afterEnterOutdoorsLevel",
      //     },
      //     "*"
      //   );
      // });
      // campus.applyTheme('default_parkbusiness'); // 更改模型默认材质
      // control.applyEffectTheme('default_parkbusiness', campus); // 生成特效地面，粒子等
      // control.applyThemeEnvironment('default_parkbusiness', campus); // 应用背景，灯光，后期等全局
    },
    handleEnter() {
      this.$app.on("afterEnterBuildingLevel", () => {
        this.isProduct = true;
        window.parent.postMessage(
          {
            action: "afterEnterBuildingLevel",
            productList: this.productList,
          },
          "*"
        );
        this.removePro();
        this.initProMarker();
      });
    },
    handleClose() {
      this.echartsDrawerShow = false;
      this.manufacturing = false;
    },
    handleBuild() {
      this.manufacturing = false;
      this.isProduct = true;
      this.$app.level.change(this.$app.buildings[0]);
    },
    handleContextmenu() {
      this.isProduct = false;
    },
  },
  setup(prop, context) {
    let loading = ElLoading.service({
      lock: true,
      text: "加载中...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    setTimeout(function () {
      loading.close();
    }, 3000);
    const fullscreenName = ref("全屏");
    const fullscreen = ref(false);
    const isFullShow = ref(true);

    const checkFull = () => {
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    };
    if (checkFull()) {
      fullscreen.value = true;
      fullscreenName.value = "退出全屏";
    }
    window.onresize = function () {
      console.log(checkFull());
      if (!checkFull()) {
        // 退出全屏后要执行的动作
        fullscreen.value = false;
      }
    };

    const handlefullScreen = () => {
      isFullShow.value = false;
      let element = document.documentElement;
      if (fullscreen.value) {
        fullscreenName.value = "全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        fullscreenName.value = "退出全屏";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      nextTick(function () {
        isFullShow.value = true;
      });
      fullscreen.value = !fullscreen.value;
    };
    const handleParkOverview = (carousel) => {
      carousel.next();
      // dataBoardRightRef.value.next();   dataBoardRef.value.next();
    };
    return { fullscreenName, isFullShow, handlefullScreen, handleParkOverview };
  },
};
</script>
<style lang="less">
// @import "../../assets/css/map.css";
@import "../../assets/css/common1.css";
@import "../../assets/css/geoMap.css";

.productList {
  position: fixed;
  top: 130px;
  left: 48%;
  transform: translateY(-50%);
  color: #1aaedb;
  font-size: 18px;
  cursor: pointer;

  a {
    color: #1aaedb;
    text-decoration: underline;
  }
}

.data>.data-content>.con-left {
  position: fixed;
  z-index: 999;
  left: 0;
  // top: 70px;
  width: 30%;
}

.data>.data-content>.con-right {
  position: fixed;
  z-index: 999;
  right: 0;
  // top: 80px;
}

.s2 .cicle5 {
  transform-style: preserve-3d;
  // background: url(https://img.zlink.group/hfsource/public/img/point.svg)
  //   no-repeat center;
  // background-size: contain;
  transform: rotateX(360deg);
  animation: circle5 4s linear infinite;
  /* // animation: scale 2s linear infinite;
    // border-radius: 60%;
    // border: 1px solid rgba(255, 255, 255, 0.295); */
}

@keyframes circle5 {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(20%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes scale {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) scale(1.2);
    opacity: 0.6;
  }
}
</style>
